<template>
  <div>
    <el-form size="small">
      <el-row>
        <el-col :span="6">
          <!-- 学科 -->

          <el-form-item label="学科" label-width="80px">
            <el-select clearable v-model="id" placeholder="请选择">
              <el-option
                v-for="item in subjectList"
                :key="item.id"
                :label="item.subjectName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 二级目录 -->
        <el-col :span="6">
          <el-form-item label="二级目录" label-width="80px">
            <el-select clearable v-model="value2" multiple placeholder="请选择">
              <el-option
                v-for="item in subjectList"
                :key="item.id"
                :label="item.twoLevelDirectory"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 标签 -->
        <el-col :span="6">
          <el-form-item id="label" label="标签" label-width="80px">
            <el-select clearable v-model="value3" multiple placeholder="请选择">
              <el-option
                v-for="item in subjectList"
                :key="item.id"
                :label="item.tags"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!--关键字  -->
        <el-col :span="6">
          <el-form-item label="关键字" label-width="80px">
            <el-input class="input" v-model="keyWordInput" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <!-- 试题类型 -->
        <el-col :span="6">
          <el-form-item id="label" label="试题类型" label-width="80px">
            <el-select clearable v-model="value3" multiple placeholder="请选择">
              <el-option
                v-for="item in subjectList"
                :key="item.id"
                :label="item.tags"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 难度 -->
        <el-col :span="6">
          <el-form-item id="label" label="难度" label-width="80px">
            <el-select clearable v-model="value3" multiple placeholder="请选择">
              <el-option
                v-for="item in subjectList"
                :key="item.id"
                :label="item.tags"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 方向 -->
        <el-col :span="6">
          <el-form-item id="label" label="方向" label-width="80px">
            <el-select clearable v-model="value3" multiple placeholder="请选择">
              <el-option
                v-for="item in subjectList"
                :key="item.id"
                :label="item.tags"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 录入人 -->
        <el-col :span="6">
          <el-form-item id="label" label="录入人" label-width="80px">
            <el-select clearable v-model="value3" multiple placeholder="请选择">
              <el-option
                v-for="item in subjectList"
                :key="item.id"
                :label="item.tags"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!--题目备注  -->
        <el-col :span="6">
          <el-form-item label="题目备注" label-width="80px">
            <el-input class="input" v-model="keyWordInput" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <!--企业简称  -->
        <el-col :span="6">
          <el-form-item label="企业简称" label-width="80px">
            <el-input class="input" v-model="keyWordInput" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <!-- 城市 -->
        <el-col :span="6">
          <el-form-item id="label" label="城市" label-width="80px">
            <el-row>
              <!-- 城市1 -->
              <el-col :span="12">
                <el-select
                  class="smallSelect"
                  clearable
                  v-model="value3"
                  multiple
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in subjectList"
                    :key="item.id"
                    :label="item.tags"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-col>
              <!-- 城市2 -->
              <el-col :span="12">
                <el-select clearable v-model="value3" multiple placeholder="请选择">
                  <el-option
                    v-for="item in subjectList"
                    :key="item.id"
                    :label="item.tags"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <!-- button按钮 -->
        <el-col :span="6">
          <div class="button">
            <el-button @click="id=''" size="mini">清除</el-button>
            <el-button size="mini" type="primary" @click="getQuestions">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import instance from '@/utils/request'
export default {
  data() {
    return {
      subjectList: [],
      id: '',
      value2: [],
      value3: [],
      keyWordInput: '',
    }
  },
  created() {
    this.getdata()
  },
  methods: {
    async getdata() {
      try {
        const { data: res } = await instance({
          method: 'GET',
          url: '/subjects',
          params: {
            page: 1,
            pagesize: 50,
          },
        })
        console.log(res)
        this.subjectList = res.items
      } catch (err) {
        console.log(err)
        this.$message.error('获取学科列表失败')
      }
    },
    getQuestions() {
      // try {
      //   const { data: res } = await instance({
      //     method: 'GET',
      //     url: '/questions/choice',
      //     params: {
      //       subjectID: this.id,
      //       page: 1,
      //       pagesize: 5
      //     }
      //   })
      this.$emit('searchResults', this.id)
      // } catch (err) {
      //   console.log(err)
      //   this.$message.error('获取题库失败')
      // }
    },
  },
}
</script>

<style lang="less" scoped>
// .selected-container {
//   //   position: static;
//   display: inline-block;
// }
.el-select {
  width: 100%;
  // float: right;
  // margin-left: 80px;
}
.input {
  width: 100%;
  padding-right: 0;
}
// .el-input {
//   float: right;
// }
// /deep/#label {
//   .el-form-item__label {
//     margin-right: 270px;
//   }
// }
// .el-col-6 {
//   display: flex;
//   justify-content: right;
// }
// .me {
//   float: right;
// }
// .el-form-item__content {
//   float: right;
// }
.smallSelect {
  width: 98%;
  margin-right: 2%;
}
.button {
  float: right;
}
</style>